<template>
  <view class="container">
    <tab-bar :currentPage="currentPage"></tab-bar>
    <view class="user-info">
      <view class="user-header">
        <view class="header-placeholder"></view>
        <text class="user-title">用户</text>
        <view class="message-icon-wrapper">
          <img
            class="message-icon"
            src="/static/user/message.png"
            alt="Message Icon"
          />
          <view class="message-badge">1</view>
        </view>
      </view>

      <view class="user-content">
        <view class="user-details-wrapper">
          <u-avatar src="/static/user-avatar.png" size="70"></u-avatar>
          <view class="user-details">
            <view class="user-row">
              <text class="user-name">奎赛</text>
              <text class="user-gender">男</text>
            </view>
            <view class="user-birthdate">
              <text>1993-08-14</text>
            </view>
          </view>
        </view>
        <view class="user-info-right">
          <text>用户信息</text>
          <u-icon name="arrow-right" size="14" color="#fff"></u-icon>
        </view>
      </view>

      <view class="floating-elements" v-if="!isShowList">
        <view class="floating-item">
          <img class="item-icon" src="/static/user/car.png" alt="Car Icon" />
          <text>我的车辆</text>
        </view>
        <view class="floating-item">
          <img
            class="item-icon"
            src="/static/user/company.png"
            alt="Company Icon"
          />
          <text>我的企业</text>
        </view>
      </view>

      <view class="floating-elements" v-if="isShowList">
        <!-- First Item: Text with Image -->
        <view class="floating-item">
          <img
            class="item-icon"
            src="/static/user/origin.png"
            alt="Home Icon"
          />
          <text class="item-title">所属机构</text>
        </view>

        <!-- Second Item: Text with Image -->
        <view class="floating-item">
          <img class="item-icon" src="/static/user/about.png" alt="Info Icon" />
          <text class="item-title">关于</text>
        </view>
      </view>
    </view>

    <view class="list-section-content">
      <view class="list-section">
        <view class="list-item" v-for="(item, index) in listItems" :key="index">
          <img class="item-icon" :src="item.icon" :alt="item.title" />
          <text class="item-title">{{ item.title }}</text>
        </view>
      </view>
    </view>

    <view class="logout-section">
      <u-button @click="handleLogout" type="error">退出</u-button>
    </view>
  </view>
</template>

<script>
import tabBar from "../tabbar/tabbar.vue";
import { logout } from "@/common/api/req.js";
import { clearUserData } from "@/common/store.js";

export default {
  components: {
    tabBar,
  },
  data() {
    return {
      isShowList: false,
      currentPage: 2,
      listItems: [
        { icon: "/static/user/info.png", title: "信息公告" },
        { icon: "/static/user/faq.png", title: "常见问题" },
        { icon: "/static/user/learn.png", title: "在线学习" },
        { icon: "/static/user/sos.png", title: "应急电话" },
        { icon: "/static/user/complaint.png", title: "问题投诉" },
        { icon: "/static/user/about.png", title: "关于" },
      ],
    };
  },
  mounted() {
    uni.hideTabBar(); // 隐藏默认的 tab-bar
  },
  methods: {
    logout() {
      uni.clearStorage();
      uni.redirectTo({ url: "/" });
    },
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            this.performLogout();
          }
        },
      });
    },

    performLogout() {
      logout()
        .then(() => {
          // 使用新的 clearUserData 方法清除所有用户相关数据
          clearUserData();

          // 显示退出成功提示
          uni.showToast({
            title: "退出登录成功",
            icon: "success",
            duration: 2000,
          });

          // 跳转到登录页面
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/common/login/login",
            });
          }, 2000);
        })
        .catch((error) => {
          console.error("退出登录失败:", error);
          uni.showToast({
            title: "退出登录失败，请重试",
            icon: "none",
            duration: 2000,
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f3f6fa;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

.user-info {
  background-image: url("/static/index/header-bg.png");
  background-size: cover;
  background-position: center;
  height: 240px;
  padding: 20px;
  position: relative;
  .user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    .user-title {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
    .header-placeholder {
      width: 24px;
    }
    .message-icon-wrapper {
      position: relative;
      .message-icon {
        width: 24px; // 根据新图标调整
        height: 24px; // 根据新图标调整
      }
      .message-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        background-color: #ff4d4f;
        color: white;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.user-content {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .user-details-wrapper {
    display: flex;
    align-items: center;
  }
  .user-details {
    margin-left: 15px;
    color: #ffffff;
    .user-row {
      display: flex;
      align-items: baseline;
      .user-name {
        font-size: 16px;
        font-weight: bold;
        margin-right: 10px;
      }
      .user-gender {
        font-size: 12px;
        opacity: 0.9;
      }
    }
    .user-birthdate {
      font-size: 12px;
      opacity: 0.9;
    }
  }
  .user-info-right {
    color: #ffffff;
    font-size: 12px;
    display: flex;
    align-items: center;
  }
}

.floating-elements {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: -10px;
  left: 20px;
  right: 20px;
}

.floating-item {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px;
  display: flex;

  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 48%;
  &:last-child {
    margin-left: 10px;
  }
  .item-icon {
    width: 40px; // 根据新图标调整
    height: 40px; // 根据新图标调整
    margin-right: 10px;
  }
}

.floating-item .floating-item text {
  font-size: 15px;
  color: #333333;
  font-weight: 500;
}

.list-section-content {
  margin-top: 30px;
  padding: 0 20px;
}

.list-section {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.list-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.list-item:last-child {
  border-bottom: none;
}

.item-icon {
  width: 24px; // 根据新图标调整
  height: 24px; // 根据新图标调整
}

.item-title {
  font-size: 16px;
  color: #333333;
  margin-left: 20rpx;
}

.logout-section {
  margin-top: 30px;
  padding: 0 20px 20px;
}

/* 添加响应式设计 */
@media screen and (min-width: 768px) {
  .user-info {
    height: 280px;
  }

  .user-title {
    font-size: 24px;
  }

  .user-name {
    font-size: 26px;
  }

  .floating-item {
    padding: 20px;
  }

  .floating-item .item-icon {
    width: 40px;
    height: 40px;
  }

  .floating-item text {
    font-size: 16px;
  }
}
</style>
